<link href="https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.0/animate.min.css" rel="stylesheet">
<style type="text/css">
	.animate__animated{
		width: 150px;
		height: 150px;
		line-height: 150px;
		text-align: center;
		background-color: #009688;
		cursor: pointer;
		color: #fff;
		margin: 30px;
		border-radius: 50%;
	}
</style>



<!-- 文档地址 https://animate.style/ -->
<ul style="list-style: none;padding: 1px;margin:0;display: flex;justify-content: space-around;flex-wrap: wrap;">
	<li>
		<div class="animate__animated" data-animate='animate__bounce'>弹跳</div>
	</li>
	<li>
		<div class="animate__animated" data-animate='animate__flash'>闪烁</div>
	</li>
	<li>
		<div class="animate__animated" data-animate='animate__pulse'>脉冲</div>
	</li>
	<li>
		<div class="animate__animated" data-animate='animate__rubberBand'>橡皮筋</div>
	</li>
	<li>
		<div class="animate__animated" data-animate='animate__shakeX'>水平晃动</div>
	</li>
	<li>
		<div class="animate__animated" data-animate='animate__shakeY'>垂直晃动</div>
	</li>
	<li>
		<div class="animate__animated" data-animate='animate__headShake'>摇头</div>
	</li>
	<li>
		<div class="animate__animated" data-animate='animate__swing'>摇摆</div>
	</li>
	<li>
		<div class="animate__animated" data-animate='animate__tada'>吃惊</div>
	</li>
	<li>
		<div class="animate__animated" data-animate='animate__wobble'>摇晃</div>
	</li>
	<li>
		<div class="animate__animated" data-animate='animate__jello'>果冻</div>
	</li>
	<li>
		<div class="animate__animated" data-animate='animate__heartBeat'>心跳</div>
	</li>
	
</ul>
<script type="text/javascript">
	$('.animate__animated').click(function(){
		var anthis=$(this),data=anthis.data('animate');
		console.log(anthis.parent().index());
		anthis.removeClass(data);
		setTimeout(function(){
			anthis.addClass(data);
		});

	})
</script>